<template>
  <div class="myume fixt mytoch" @touchmove.prevent>
    <div>
      <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad" :offset="30">
        <div v-for="(item,index) in list" :key="index+'myresume'">
          <div class="zwlb">
            <ul>
              <li>
                <div class="zwlbnr">
                  <p class="zwlbbt">
                    单位： {{item.areaName}}

                  </p>
                  <p>
                    已就业人数：{{item.rejrs2}}
                  </p>
                  <p>
                    未就业人数：{{item.rejrs5}}
                  </p>
                  <p>
                    辖区内劳动力总数：{{item.rejrs1}}
                  </p>
                </div>

                <!-- <van-divider style="color:#323233" /> -->
              </li>
            </ul>
            <div>
              <button class="myresumedel" @click="resumedel(item.id)">删除</button>
              <button class="myresumerenove" @click="selectEdit(item.id)">编辑</button>
            </div>
          </div>
        </div>
      </van-list>
      <button class="myresumeadd" style="position: fixed;bottom: 0.5rem;right: 0.5rem;"
        @click="addResume">新建就业人员统计</button>
    </div>
  </div>
</template>
<script>
import UNEMPLOY from '@/api/unemploy'
import { _debounce } from '@/assets/js/public'
export default {
  data () {
    return {
      zw: '',
      list: [],
      finished: false,
      loading: false,
      pageInfo: {
        page: 1,
        size: 10
      },
    }
  },
  computed: {},
  methods: {
    addResume () {
      this.$router.push({
        name: 'employmentRegistrationAdd',
        query: {
          num: 1
        }
      })
    },
    // 失业人员列表
    employmentPistPage: _debounce(function (_type, index, item) {
      let that = this
      // let formData = new FormData();
      // formData.append('size', this.pageInfo.size);
      // formData.append('page', this.pageInfo.page);
      let quary = this.pageInfo
      UNEMPLOY.employmentPistPage(quary).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          // that.list = res.data.data.records
          if (!res.data.data.records || res.data.data.records.length === 0) {
            // 加载结束
            that.finished = true
            return
          } else {
            for (let i = 0; i < res.data.data.records.length; i++) {
              that.list.push(res.data.data.records[i])
            }
            that.finished = false
          }

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (that.list.length >= res.data.data.total) {
            that.finished = true
          }
        }
      })
    }, 600),
    // 上拉加载
    onLoad: _debounce(function (_type, index, item) {
      let that = this

      // that.loading = false
      setTimeout(() => {
        that.pageInfo.page++
        that.employmentPistPage()
      }, 200)
    }, 1000),

    // 简历编辑
    selectEdit (id) {
      this.$router.push({
        name: 'employmentRegistrationAdd',
        query: {
          id: id,
          num: 2
        }
      })
    },
    // 简历删除
    resumedel (id) {
      let that = this

      this.$dialog
        .confirm({
          title: '就业人员统计删除',
          message: '是否删除就业人员统计',
          lockScroll: true,
          closeOnPopstate: true
        })
        .then(() => {
          // let params = {
          //   id: id
          // };
          UNEMPLOY.employmentDel(id).then(res => {
            console.log(res.data)
            if (res.data.success) {
              this.list = []
              this.pageInfo.page = 1
              this.employmentPistPage()
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created () {
    this.employmentPistPage()
  }
}
</script>
<style scoped>
.mymumeheader {
  /* height: 1rem;
  line-height: 1rem; */
  color: rgba(24, 147, 252, 1);
}
.mytoch {
  touch-action: none;
}
</style>
